<template>
  <view class="phxx-item loaded-item-box">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.carBrand || '-' }}</view>
          <view class="cname-fu-box" v-if="types === 0">
            <view class="items-fu orange">
              皮重：{{itemList.netWeight}}吨
            </view>
            <view class="items-fu blue">
              {{itemList.proName}}
            </view>
          </view>
        </view>
        <view class="status items-fu blue" v-if="types === 1">
          {{itemList.proName}}
        </view>
      </view>
      <view class="bottom" style="margin-top: 20rpx">
        <view class="items">
          <text class="til">客户名称</text>
          <text class="val">{{ itemList.cusName || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="types === 1">
        <view class="items">
          <text class="til">装车工</text>
          <text class="val">{{ itemList.loaderName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">设备名称</text>
          <text class="val">{{ itemList.deviceName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">扫码时间</text>
          <text class="val">{{ itemList.scanTime || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="types === 1">
        <view class="items">
          <text class="til">装车时间</text>
          <text class="val">{{ itemList.loadTime || '' }}</text>
        </view>
      </view>
      <view class="bottom" v-if="itemList.modelId == '集装箱板车'">
        <view class="items">
          <text class="til">建议毛重</text>
          <text class="val">{{itemList.advGrossWeight || 0}}吨</text>
        </view>
      </view>

      <view class="button-wrapper" v-if="types === 0">
        <button class="cancelBtn btns" type="primary" @click.stop="loadedFun(itemList)">确认装车</button>
      </view>
    </view>
  </view>
</template>

<script>
  import { confirmLoaded } from '@/api/tranplan.js';
  import {
    getDriverId
  } from '@/utils/auth';
  export default {
    name: 'unloading-waybill',
    props: {
      itemList: {
        type: Object,
        default: {}
      },
      types: {
        type: Number,
        default: 0//0待装车
      },
    },
    data() {
      return {
      };
    },
    methods: {
      async loadedFun(item) {
        const qData = {
          loadingId: item.id,
          userId: getDriverId()
        }
        const resData = await confirmLoaded(qData)
        if (resData.code == 0) {
          this.$emit('loadedFinish');
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top .status {
    min-width: 58px;
    margin-left: 10px;
  }

  .button-wrapper {
    display: flex;
    justify-content: flex-end;

    button {
      width: 100%;
      height: 72rpx;
      line-height: 72rpx;
    }
  }

  .bottom-btn {
    text-align: right;
    border-top: 1px solid #e8e7e7;
    padding-top: 10px;
    margin-left: 10px;
    width: 100%;

    button {
      margin-left: 10rpx;
    }
  }

  .weight-row {
    display: flex;
    border-radius: 4px;
    margin: 10px 0;
    background: #f1f2f5;

    >view {
      flex: 1;
      height: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 2px;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }

  .price-row {
    display: flex;
    margin-bottom: 10px;

    >view {
      flex: 1;
      height: 46px;
      display: flex;
      align-items: center;
      background: #f1f2f5;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
</style>